<script>
import {
  settlePage,
  settleDetailsPage,
  orderDetailByCode,
  settleUpdate,
  accountRecordPage,
} from "@/api/mallApi/account";

export default {
  name: "AccountSettlement",
  data() {
    return {
      value: "",
      showAll: true,
      formData: {
        mallName: "",
        status: "",
        payStatus: "",
        searchBeginTime: "",
        searchEndTime: "",
      },
      tableData: [],
      loading: false,
      drawerTableLoading: false,
      innerLoading: false,
      drawer: false,
      drawerData: {
        // 订单编号
        orderCode: "",
      },
      drawerTableData: [],
      data: [],
      innerDrawer: false,
      innerData: [],
      innerTotal: 0,
      innerSize: 10,
      innerCurrent: 1,
      total: 0,
      size: 10,
      current: 1,
      drawerTotal: 0,
      drawerSize: 10,
      drawerCurrent: 1,
      settleId: "",
      orderNumber: "",
    };
  },
  computed: {
    word: function () {
      if (this.showAll == false) {
        //对文字进行处理
        return "收起";
      } else {
        return "展开";
      }
    },
    tableHeight() {
      if (this.showAll) {
        return window.innerHeight - 70;
      } else {
        return window.innerHeight - 70;
      }
    },
  },
  created() {
    this.getList();
  },
  methods: {
    handleClear() {
      this.$refs.formData.resetFields();
      this.value = "";
      this.formData = {
        mallName: "",
        status: "",
        payStatus: "",
        searchBeginTime: "",
        searchEndTime: "",
      };
    },
    changeDate(val) {
      if (val) {
        this.formData.searchBeginTime = val[0];
        this.formData.searchEndTime = val[1];
      } else {
        this.formData.searchBeginTime = "";
        this.formData.searchEndTime = "";
      }
    },
    getList() {
      this.loading = true;
      const params = {
        ...this.formData,
        pageSize: this.size,
        pageNo: this.current,
      };
      settlePage(params)
        .then((res) => {
          if (res.code === "00000") {
            this.loading = false;
            this.tableData = res.data.rows;
            this.total = res.data.totalRows;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleView(val) {
      this.drawer = true;
      this.settleId = val.id;
      this.get();
    },
    get() {
      this.drawerTableLoading = true;
      settleDetailsPage({
        settleId: this.settleId,
        pageNo: this.drawerCurrent,
        pageSize: this.drawerSize,
        ...this.drawerData,
      })
        .then((res) => {
          if (res.code === "00000") {
            this.drawerTableLoading = false;
            this.drawerTableData = res.data.rows;
            this.drawerTotal = res.data.totalRows;
          }
        })
        .catch((err) => {
          this.drawerTableLoading = false;
        });
    },
    handleClose() {
      this.drawer = false;
    },
    clear() {
      this.$refs.drawerData.resetFields();
      this.drawerData = {
        orderCode: "",
      };
    },
    handleOpen(val) {
      this.innerDrawer = true;
      this.orderNumber = val.orderCode;

      this.getOrder();
    },
    getOrder() {
      this.innerLoading = true;
      accountRecordPage({
        orderNumber: this.orderNumber,
        pageNo: this.innerCurrent,
        pageSize: this.innerSize,
      })
        .then((res) => {
          if (res.code === "00000") {
            this.innerLoading = false;
            this.innerData = res.data.rows;
            this.innerTotal = res.data.totalRows;
          }
        })
        .catch((err) => {
          this.innerDrawer = false;
        });
    },
    innerClose() {
      this.innerDrawer = false;
    },
    handleInnerSizeChange(val) {
      this.innerSize = val;
      this.getOrder();
    },
    handleInnerCurrentChange(val) {
      this.innerCurrent = val;
      this.getOrder();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getList();
    },
    handleDrawerSizeChange(val) {
      this.drawerSize = val;
      this.get();
    },
    handleDrawerCurrentChange(val) {
      this.drawerCurrent = val;
      this.get();
    },
    handleExit() {
      this.drawer = false;
    },
    handlePayment(val) {
      console.log("val: ", val);
      this.$confirm("是否确认打款？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          settleUpdate({
            id: val.id,
            status: 3,
          })
            .then((res) => {
              if (res.code === "00000") {
                this.$message({
                  type: "success",
                  message: "打款成功",
                });
                this.getList();
              }
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "打款失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消打款",
          });
        });
    },
    handleClick(row) {
      orderDetailByCode({
        orderCode: row.orderCode,
      })
        .then((res) => {
          if (res.code === "00000") {
            this.data = res.data;
          }
        })
        .catch((err) => {
          this.innerDrawer = false;
        });
    },
    closeSearch() {
      this.showAll = !this.showAll;
    },
  },
};
</script>

<template>
  <div>
    <div class="search">
      <div class="searchLeft">
        <el-row :gutter="20">
          <el-form
            :model="formData"
            label-width="150px"
            :inline="true"
            ref="formData"
          >
            <el-row>
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>店铺名称:</p>
                  <el-input
                    style="width: 300px"
                    clearable
                    v-model="formData.mallName"
                    placeholder="店铺名称"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>结算状态:</p>
                  <el-select
                    style="width: 300px"
                    clearable
                    v-model="formData.status"
                    placeholder="请选择"
                  >
                    <el-option label="待发起确认" value="1"></el-option>
                    <el-option label="待确认" value="2"></el-option>
                    <el-option label="已确认" value="3"></el-option>
                    <el-option label="已结算" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>打款状态:</p>
                  <el-select
                    style="width: 300px"
                    clearable
                    v-model="formData.payStatus"
                    placeholder="请选择"
                  >
                    <el-option label="未打款" value="1"></el-option>
                    <el-option label="已打款" value="2"></el-option>
                    <el-option label="打款失败" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row :class="!showAll ? 'btnRow' : 'unBtnRow'">
            <el-col :span="7">
              <p>结算单生成时间:</p>
              <el-date-picker
                style="width: 600px;margin-left: 10px;"
                type="daterange"
                v-model="value"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="changeDate"
              ></el-date-picker>
            </el-col>
          </el-row>
        </el-row>
      </div>
      <div class="searchRight">
        <el-button type="primary" @click="getList"> 查询 </el-button>
        <el-button @click="handleClear">重置</el-button>
        <el-row>
          <el-col :span="1.5" class="elrowBtn">
            <el-button type="text" size="max" @click="closeSearch">
              {{ word }}
              <i
                :class="showAll ? 'el-icon-arrow-down ' : 'el-icon-arrow-up'"
              ></i>
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="accountSettlement">
      <!-- <div class="search">
      <el-form
        :model="formData"
        label-width="150px"
        :inline="true"
        ref="formData"
      >
        <el-form-item label="店铺名称">
          <el-input
            style="width: 300px"
            clearable
            v-model="formData.mallName"
            placeholder="店铺吗名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            style="width: 300px"
            clearable
            v-model="formData.status"
            placeholder="请选择"
          >
            <el-option label="待发起确认" value="1"></el-option>
            <el-option label="待确认" value="2"></el-option>
            <el-option label="已确认" value="3"></el-option>
            <el-option label="已结算" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打款状态">
          <el-select
            style="width: 300px"
            clearable
            v-model="formData.payStatus"
            placeholder="请选择"
          >
            <el-option label="未打款" value="1"></el-option>
            <el-option label="已打款" value="2"></el-option>
            <el-option label="打款失败" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算单生成时间">
          <el-date-picker
            style="width: 600px"
            type="daterange"
            v-model="value"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="changeDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 80px">
          <el-button type="primary" @click="getList"
          ><i style="margin-right: 6px" class="el-icon-search"></i>搜索
          </el-button>
          <el-button @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>
    </div> -->

      <div class="title" style="margin-bottom: 20px; margin-left: 20px;margin-top:20px;">
        <span style="color: #999999">结算说明</span>
        <el-button
          icon="el-icon-refresh-right"
          circle
          @click="getList"
          style="margin-left: 92%"
        ></el-button>
      </div>

      <div class="table">
        <el-table
          :data="tableData"
          style="width: 98%;margin: 1%;"
          border
          v-loading="loading"
        >
          <!-- 序号 -->
          <el-table-column align="center" label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <!-- 店铺名称 -->
          <el-table-column
            align="center"
            prop="mallName"
            label="店铺名称"
          ></el-table-column>
          <!-- 结算单生成时间 -->
          <el-table-column
            align="center"
            prop="createAt"
            label="结算单生成时间"
          ></el-table-column>
          <!-- 周期 -->
          <el-table-column
            align="center"
            prop="period"
            label="周期"
          ></el-table-column>
          <!-- 结算金额 -->
          <el-table-column
            align="center"
            prop="money"
            label="结算金额"
          ></el-table-column>
          <!-- 已确认结算金额 -->
          <el-table-column
            align="center"
            prop="confirmedAmount"
            label="已确认结算金额"
          ></el-table-column>
          <!-- 状态 1：待发起确认2待确认3.已确认 -->
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">待发起确认</span>
              <span v-if="scope.row.status == 2">待确认</span>
              <span v-if="scope.row.status == 3">已确认</span>
            </template>
          </el-table-column>
          <!-- 打款状态 1:未打款2：已打款 -->
          <el-table-column align="center" prop="payStatus" label="打款状态">
            <template slot-scope="scope">
              <span v-if="scope.row.payStatus == 1">未打款</span>
              <span v-if="scope.row.payStatus == 2">已打款</span>
              <span v-if="scope.row.payStatus == 3">打款失败</span>
            </template>
          </el-table-column>
          <!-- 打款备注 -->
          <el-table-column
            align="center"
            prop="paymentRemark"
            label="打款备注"
          ></el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleView(scope.row)"
                >查看明细
              </el-button>
              <el-button
                v-show="scope.row.status !== 3"
                type="text"
                size="small"
                @click="handlePayment(scope.row)"
                >发起确认
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="end"
          style="margin-top: 20px; margin-bottom: 20px"
        >
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-row>
      </div>
      <div class="drawer">
        <el-drawer
          title="结算明细"
          :visible.sync="drawer"
          :with-header="true"
          size="80%"
          :before-close="handleClose"
        >
          <p style="margin-top: 20px">
            【结算价 = 买家实付 + 平台优惠券 + 积分抵扣 - 运费 - 退款积分 - 佣金
            - 分销返利 - 分享返利】
          </p>
          <el-form
            :inline="true"
            ref="drawerData"
            :model="drawerData"
            label-width="150px"
          >
            <el-form-item label="订单编号">
              <el-input
                style="width: 300px"
                clearable
                v-model="drawerData.orderCode"
                placeholder="订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 160px">
              <el-button type="primary" @click="get"
                ><i style="margin-right: 6px" class="el-icon-search"></i>搜索
              </el-button>
              <el-button @click="clear">清空</el-button>
            </el-form-item>
          </el-form>
          <el-button
            icon="el-icon-refresh"
            circle
            @click="get"
            style="margin-left: 95%; margin-bottom: 10px"
          ></el-button>
          <div class="table">
            <el-table
              border
              v-loading="drawerTableLoading"
              :data="drawerTableData"
              style="width: 100%"
              @expand-change="handleClick"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table :data="data">
                    <el-table-column
                      label="商品大类名称"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="商品子类名称"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="商品小类名称"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="商品名称"
                      prop="goodsName"
                    ></el-table-column>
                    <el-table-column
                      label="商品规格"
                      prop="goodsSpecName"
                    ></el-table-column>
                    <el-table-column
                      label="商品数量"
                      prop="amount"
                    ></el-table-column>
                    <el-table-column
                      label="商品单价"
                      prop="price"
                    ></el-table-column>
                    <el-table-column label="佣金比例" prop=""></el-table-column>
                    <el-table-column
                      label="主活动优惠"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="附属活动优惠"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="商家优惠券"
                      prop=""
                    ></el-table-column>
                    <el-table-column label="运费" prop=""></el-table-column>
                    <el-table-column label="退款金额" prop=""></el-table-column>
                    <el-table-column
                      label="商品小计"
                      prop="subtotal"
                    ></el-table-column>
                    <el-table-column
                      label="买家实付金额"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="平台优惠券"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="积分抵扣金额"
                      prop=""
                    ></el-table-column>
                    <el-table-column
                      label="实际付款金额"
                      prop="subtotal"
                    ></el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="订单编号"
                prop="orderCode"
              ></el-table-column>
              <el-table-column
                align="center"
                label="是否已确认收款"
                prop="status"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1">未确认</span>
                  <span v-if="scope.row.status == 2">已确认</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="总售价"
                prop="money"
              ></el-table-column>
              <!--            <el-table-column-->
              <!--              align="center"-->
              <!--              label="佣金额"-->
              <!--              prop=""-->
              <!--            ></el-table-column>-->
              <!--            <el-table-column-->
              <!--              align="center"-->
              <!--              label="分享返利金额"-->
              <!--              prop=""-->
              <!--            ></el-table-column>-->
              <!--            <el-table-column-->
              <!--              align="center"-->
              <!--              label="分销金额"-->
              <!--              prop=""-->
              <!--            ></el-table-column>-->
              <el-table-column
                align="center"
                label="订单状态"
                prop="orderStatus"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.orderStatus == 1">未确认</span>
                  <span v-if="scope.row.orderStatus == 2">已确认</span>
                </template>
              </el-table-column>
              <!--            <el-table-column-->
              <!--              align="center"-->
              <!--              label="支付方式"-->
              <!--              prop=""-->
              <!--            ></el-table-column>-->
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleOpen(scope.row)"
                    >对账单
                  </el-button>
                  <el-drawer
                    title="对账明细列表"
                    :append-to-body="true"
                    :before-close="innerClose"
                    :visible.sync="innerDrawer"
                    size="80%"
                  >
                    <el-table border :data="innerData" v-loading="innerLoading">
                      <el-table-column
                        align="center"
                        label="三方交易订单号"
                        prop="thirdOrderNumber"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="交易类型"
                        prop="transactionType"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="交易时间"
                        prop="transactionTime"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="正常支付金额"
                        prop="payAmount"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="退款金额"
                        prop="refundAmount"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="商户订单号"
                        prop="orderNumber"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        label="交易来源"
                        prop="transactionSource"
                      ></el-table-column>
                    </el-table>
                    <el-row type="flex" justify="end" style="margin-top: 20px">
                      <el-pagination
                        background
                        @size-change="handleInnerSizeChange"
                        @current-change="handleInnerCurrentChange"
                        :current-page="innerCurrent"
                        :page-size="innerSize"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next"
                        :total="innerTotal"
                      ></el-pagination>
                    </el-row>
                  </el-drawer>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px">
              <el-pagination
                background
                @size-change="handleDrawerSizeChange"
                @current-change="handleDrawerCurrentChange"
                :current-page="drawerCurrent"
                :page-size="drawerSize"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next"
                :total="drawerTotal"
              ></el-pagination>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 60px">
              <el-button type="primary" @click="handleExit">关闭</el-button>
            </el-row>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 98%;
  margin: 1%;
  min-height: 65px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .searchLeft {
    margin-top: 20px;
    margin-left: 30px;
    width: 1200px;
    display: flex;
    ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
      p {
        display: inline-block;
        min-width: 65px;
        font-size: 14px;
      }
    }
    ::v-deep .el-form {
      display: flex;
    }
    ::v-deep .el-col-7{
      width: 800px;
      margin-top: -30px;
      display: flex;
      align-items: center;
    }
  }
  .searchRight {
    width: 10%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
    .elrowBtn {
      margin-left: 10px;
    }
  }
  .unBtnRow {
    display: none;
  }
}
.accountSettlement {
  width: 98%;
  background-color: #fff;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;

  overflow: hidden;
}
</style>
